<template>
  <div class="main" @click="mainClick">
    <div
      class="topxian"
      :style="[{ width: topxianWidth }]"
      v-show="show && iceCakeList.length > 0"
    ></div>
    <img class="topCake" v-show="show" :src="curCakeImg" id="changeSizeDom" />
    <ul id="ulDom" :style="[{ bottom: ulDomBottom + 'px' }]">
      <li
        v-for="(v, i) in iceCakeList"
        :key="iceCakeList.length - i"
        :style="{ ...v }"
      ></li>
      <!-- 底部杯子子 -->
      <li class="bot"></li>
    </ul>
    <span class="counts">分数：{{ counts }}</span>
  </div>
</template>

<script>
import { cakes } from "./utils";
import { Toast, Dialog } from "vant";
export default {
  name: "foldCake",
  data() {
    return {
      topxianWidth: 0, //顶部虚线宽度度
      cakes, //蛋糕皮肤
      curCakeImg: cakes[0], //当前皮肤
      show: false, //是否显示动态蛋糕和虚线 --true开始游戏
      counts: 0, //游戏分数
      changeSizeDom: "", //变大变小的dom
      iceCakeList: [], //层叠元素
      ulDom: "", //层叠元素父元素
      bodyHeight: "", //屏幕高度
      ulDomBottom: 0, //层叠元素父元素距离底部
    };
  },
  watch: {
    iceCakeList(newVal) {
      if (newVal.length > 0) {
        console.log(newVal[0]);
        this.topxianWidth = parseInt(newVal[0].width) - 4 + "px";
      }
    },
  },
  methods: {
    mainClick() {
      if (this.show) {
        this.changeSizeDomClick();
      }
    },
    changeSizeDomClick() {
      //隐藏上面的冰块
      this.show = false;
      //获取点击时候冰块蛋糕的宽高，添加到iceCakeList中
      let ulToP = this.ulDom.offsetTop;
      let divWidth = this.changeSizeDom.clientWidth;
      let divHeight = this.changeSizeDom.clientHeight;
      let top = ulToP - 80 - divHeight;
      this.addkeyframes(top, this.iceCakeList.length);
      this.iceCakeList.unshift({
        width: divWidth + "px",
        height: divHeight + "px",
        background: `url(${this.curCakeImg}) no-repeat center`,
        "background-size": "cover",
        animation: `draw${this.iceCakeList.length} 1s ease`,
      });
      //判断当前距离是否高过屏幕一般高度，如果高过了就往下移动
      let ulHeight = this.ulDom.clientHeight;
      if (ulHeight > this.bodyHeight / 2) {
        this.ulDomBottom =
          this.ulDomBottom - parseInt(this.iceCakeList[0].height);
      }
      //判端上面的蛋糕宽度是否大于下面的蛋糕
      setTimeout(() => {
        //当前蛋糕量是否大于等于2
        if (this.iceCakeList.length >= 2) {
          console.log(11111);
          let one = parseInt(this.iceCakeList[0].width);
          let two = parseInt(this.iceCakeList[1].width);
          console.log(one, two);
          if (one >= two) {
            setTimeout(() => {
              this.gemeOver();
            }, 500);
          } else {
            this.curCakeImg = this.cakes[
              Math.floor(Math.random() * this.cakes.length)
            ];
            this.show = true;
            this.counts = this.counts + 10;
          }
        } else {
          this.curCakeImg = this.cakes[
            Math.floor(Math.random() * this.cakes.length)
          ];
          this.show = true;
          this.counts = this.counts + 10;
        }
      }, 1000);
    },

    addkeyframes(Y, id) {
      // js创建@keyframes
      const runkeyframes = `@keyframes draw${id}{
        0% {
      transform: translateY(-${Y}px);
      }
    100% {
      transform: translateY(0%);
    }
}`;
      // 创建style标签
      const style = document.createElement("style");
      // 设置style属性
      style.type = "text/css";
      // 将 keyframes样式写入style内
      style.innerHTML = runkeyframes;
      // 将style样式存放到head标签
      document.body.appendChild(style);
    },
    //获取dom信息
    getDomInfo() {
      this.changeSizeDom = document.getElementById("changeSizeDom");
      this.ulDom = document.getElementById("ulDom");
      this.bodyHeight = document.body.clientHeight;
    },
    //开始游戏
    startGame() {
      this.show = true;
    },
    //游戏结束
    gemeOver() {
      this.show = false;
      Dialog.confirm({
        title: "游戏结束",
        message: "再来一次",
      })
        .then(() => {
          this.againGame();
        })
        .catch(() => {});
    },
    //重置游戏
    restGame() {
      this.counts = 0;
      this.iceCakeList = [];
      this.ulDomBottom = 0;
    },
    //再来一次
    againGame() {
      this.restGame();
      this.startGame();
    },
  },
  mounted() {
    this.getDomInfo();
    this.startGame();
  },
};
</script>

<style scoped lang="less">
.main {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background-color: green;
  .avatar {
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    left: 15px;
    top: 10px;
    border: 2px solid #18cffd;
  }
  .counts {
    position: absolute;
    left: 95px;
    top: 20px;
    font-size: 16px;
    color: #ffffff;
  }
  .topxian {
    position: absolute;
    left: 50%;
    top: 70px;
    z-index: 9;
    pointer-events: none;
    border-left: 1px dashed #ffffff;
    border-right: 1px dashed #ffffff;
    transform: translateX(-50%);
    animation-name: changeheight; /*动画的名字*/
    animation-duration: 1500ms; /*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
    animation-iteration-count: infinite; /*定义动画的播放次数，这里是无限播放*/
    animation-direction: alternate; /*定义是否应该轮流反向播放动画，这里是动画轮流播放*/
    animation-timing-function: ease-in-out;
  }
  #changeSizeDom {
    position: absolute;
    left: 50%;
    top: 80px;
    transform: translateX(-50%);
    animation-name: mychange; /*动画的名字*/
    animation-duration: 1500ms; /*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
    animation-iteration-count: infinite; /*定义动画的播放次数，这里是无限播放*/
    animation-direction: alternate; /*定义是否应该轮流反向播放动画，这里是动画轮流播放*/
    animation-timing-function: ease-in-out;
  }
  #ulDom {
    position: absolute;
    width: 100%;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 1s;
    li {
      background-color: green;
      animation-duration: 1000ms; /*定义动画完成一个周期所需要的时间，以秒或毫秒计*/
      animation-iteration-count: 1; /*定义动画的播放次数，这里是无限播放*/
      &.bot {
        width: 352px;
        height: 160px;
        background: url("../../assets/foldIce/beizi.png") no-repeat top center;
        background-size: cover;
      }
    }
  }
  /* drawCircle/pages/alert/alert.wxss */
  .noticebg {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;

    .modalBox {
      width: 310px;
      height: 288.5px;
      position: relative;
      border-radius: 10px;
      background: url("https://zjdxwt.oss-cn-hangzhou.aliyuncs.com/qywx/foldIce/modalBg.png")
        no-repeat top center;
      background-size: 310px 288.5px;
      display: flex;
      justify-content: center;
      padding-top: 110px;
      box-sizing: border-box;
    }
    .botBtns {
      position: absolute;
      left: 0;
      bottom: -30px;
      display: flex;
      width: 100%;
      justify-content: space-between;
      padding: 0 20px;
      box-sizing: border-box;
      font-size: 16px;
      color: #ffffff;
      span {
        border-bottom: 1px solid;
        &.yel {
          color: #f6ff00;
        }
      }
    }
    .closeBtn {
      position: absolute;
      right: 0;
      top: -30px;
      width: 28px;
      height: 28px;
    }

    .modalInfoBox {
      width: 258px;
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      text-align: center;
      justify-content: space-around;
      box-sizing: border-box;
      padding-bottom: 10px;
      align-items: center;
    }

    .modalTitle {
      font-size: 18px;
      font-weight: 500;
      font-family: SourceHanSansCN;
      color: rgba(0, 117, 192, 1);
    }

    .modalText {
      font-size: 14px;
      font-family: SourceHanSansCN;
      font-weight: 400;
      color: rgba(0, 117, 192, 1);
      line-height: 21px;
    }

    .modalBtn {
      width: 225px;
      height: 35px;
      line-height: 35px;
      font-size: 18px;
      font-family: SourceHanSansCN;
      font-weight: bold;
      border-radius: 19px;
    }

    .modalBtn1 {
      background: rgba(91, 195, 255, 1);
      box-shadow: 0px 6px 3px 0px rgba(131, 205, 221, 0.36);
      color: rgba(255, 255, 255, 1);
    }

    .modalBtn2 {
      background: #ffec13;
      box-shadow: 0px 6px 3px 0px rgba(131, 205, 221, 0.36);
      color: rgba(193, 82, 0, 1);
    }
  }

  @keyframes mychange {
    0% {
      width: 317px;
      height: 144px;
    }
    100% {
      width: 50px;
      height: 21px;
    }
  }
  @keyframes changeheight {
    0% {
      height: 160px;
    }
    100% {
      height: 21px;
    }
  }
}
</style>
